<template>
  <el-tabs
    v-model="pageModel.activeName"
    class="detail"
    type="card"
    stretch
    style="height: 100%"
  >
    <el-tab-pane :lazy="true" label="个人档案查询" name="first">
      <PersonalArchivesList />
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="家庭档案查询" name="second">
      <FamilyArchivesList />
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="个人健康档案查询" name="third">
      <HealthArchivesList />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import PersonalArchivesList from "./PersonalArchivesList.vue";
import FamilyArchivesList from "./FamilyArchivesList.vue";
import HealthArchivesList from "./HealthArchivesList.vue";
import { reactive } from "vue";

const pageModel = reactive({
  activeName: "first",
});
</script>
<style scoped lang="scss">
.detail {
  :deep(.el-tabs__header .el-tabs__nav) {
    background-color: #fff;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 60px);
  }

  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-main) {
    padding: 0 !important;
  }
}
</style>
